<template>
  <el-form ref="form" :model="form" label-width="80px" class="formContent">
    <el-form-item label="用户名" class="paddingLocation">
      <el-input placeholder="请输入用户名" v-model="form.name" class="formName"></el-input>
    </el-form-item>
    <el-form-item label="密码" class="paddingLocation">
      <el-input placeholder="请输入密码" v-model="form.pwd" show-password  class="formPwd" ></el-input>
    </el-form-item>
    <el-form-item class="paddingLocation">
      <el-button type="primary" @click="onSubmit('form')" class="loginBtn" size="medium">登陆</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          pwd: ''
        }
      }
    },
    methods: {
      onSubmit(ele) {
       this.$refs[ele].validate((valid) => {
         if (valid) {
           //发送请求
           this.$http.jsonp('http://localhost:8180/login',this.form)
             .then((res) => {
                console.log(res);
              })
             .catch((err) => {
               console.log(err)
             })
         }else{
           this.$message.error('请填写所需要的信息');
          return false;
        }
     })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .paddingLocation{
    padding: 0 0 0 60px;
  }
  .formContent{
    margin-top: 100px;

  }
  .formName,.formPwd{
    width: 300px;
  }
  .loginBtn{
    width: 200px;
    font-size: 16px;
    margin-left: 30px;
  }
</style>
